<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'


</script>

<template>
    <div class="flex font-light items-center justify-center">
        <img
            @click="console.log('点击跳转上一张日记')"
            class="w-8 h-8 mr-3 animate-bounce"
            src="../../../assets/content/arrow-left-wide-line.png"
        >
        <div class="mx-auto text-mini">
            <div class="flex items-center justify-around pb-2 font-mono text-xs text-green-500">
                <div class="flex">
                    <img
                        class="w-4 h-4 pr-1"
                        src="../../../assets/content/calendar-2-line.png"
                    >
                    <div class="opacity-80">2024年01月</div>
                </div>
                <div
                    @click="console.log('点击导出成书')"
                    class="flex"
                >
                    <img
                        class="w-4 h-4 pr-1"
                        src="../../../assets/content/slideshow-line.png"
                    >
                    <div class=" opacity-80 ">导出成书</div>
                </div>

            </div>

            <div class="mx-auto w-52 bg-white h-60 border-t rounded-t-2xl">
                <img
                    class="h-auto w-5/6 mx-auto mt-12"
                    src="../../../assets/content/dog.png"
                >
            </div>

            <div class=" mx-auto w-52 text-white bg-black h-16 border-b rounded-b-2xl pt-2  space-y-2">
                <div class="flex items-center justify-center">
                    01月21日
                </div>
                <div class="border-b bg-gray-500 border-solid w-3 mx-auto"></div>
                <div class="flex items-center justify-center ">
                    日记标题
                </div>
            </div>
        </div>

        <img
            @click="console.log('点击跳转下一张日记')"
            class="w-8 h-8 ml-3 animate-bounce"
            src="../../../assets/content/arrow-right-wide-line.png"
        >
    </div>
</template>

<style scoped></style>